<template>
  <div id="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const chart = ref(null);

onMounted(() => {
  const myChart = echarts.init(chart.value);

  myChart.setOption({
    series: [
      {
        type: 'pie',
        radius: ['10%', '60%'], // 缩小内半径，使得环形更接近外圈
        center: ['50%', '50%'],
        roseType: 'area', // 设置为玫瑰图样式
        label: {
          show: true,
          position: 'outside', // 标签显示在外部
          formatter: '{b}: {d}%' // 标签格式：名称和百分比
        },
        labelLine: {
          show: true,
          length: 15, // 引导线第一段长度
          length2: 10 // 引导线第二段长度
        },
        itemStyle: {
          borderRadius: 8 // 扇区边缘圆角
        },
        data: [
          { value: 10, name: '整改完成' },
          { value: 20, name: '视同已整改' },
          { value: 30, name: '整改中' },
          { value: 40, name: '未整改' }
        ]
      }
    ]
  });
});
</script>

<style scoped>
#chart {
  width: 450px; /* 设置合适的宽度 */
  height: 300px; /* 设置合适的高度 */
}
</style>
